/**
 * Created by hejg on 2018/5/7.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import PowerIcon from 'react-native-vector-icons/Ionicons';
import Style from '../../../../components/Style';
import Tool from '../../../../components/Tool';
import ExaminaIndex_3_Detail from '../components/ExaminaIndex_3_Detail';
import Echarts from 'native-echarts';
export default class Examination extends Component {
    constructor(props) {
        super(props);
        this._click=this._click.bind(this);
        this._change=this._change.bind(this);
        this.state={
            select:-1,
            visible:'menu'
        }
    }
    _click(select_id){
        this.setState({
            select:select_id,
        });
    }
    _change(value){
        this.setState({
            visible:value
        });
    }
    render() {
        return (
            <View>
                {
                    this.state.visible=='menu'?
                        <View>
                            <View style={{margin:15}}>
                                <Text style={{color:Style.color.blue,fontSize:Style.fontSize.normal}}>请选择对标地市 </Text>
                            </View>
                            <View>
                                <View style={{flexWrap: 'wrap', display:'flex', flexDirection: 'row'}}>
                                    <ListItem index={1} click={this._click} select={this.state.select}/>
                                    <ListItem index={2} click={this._click} select={this.state.select}/>
                                    <ListItem index={3} click={this._click} select={this.state.select}/>
                                    <ListItem index={4} click={this._click} select={this.state.select}/>
                                    <ListItem index={5} click={this._click}  select={this.state.select}/>
                                    <ListItem index={6} click={this._click} select={this.state.select}/>
                                    <ListItem index={7} click={this._click} select={this.state.select}/>
                                </View>
                                <TouchableOpacity
                                    onPress={()=>this._change('detail')}
                                    style={styles.operateView}>
                                    <PowerIcon name={'ios-power'} size={25} color={Style.color.black}/>
                                    <Text style={{color:Style.color.black}}>开始对标</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        :
                        <ExaminaIndex_3_Detail change={this._change}/>
                }

            </View>
        );
    }
}

class ListItem extends Component{
    render(){
        return(
            <TouchableOpacity
                onPress={()=> this.props.click(this.props.index)}
                style={[styles.listView,{backgroundColor:this.props.index==this.props.select?Style.color.blue:'#d9d9d9',}]}>
                <Text style={{color:this.props.index==this.props.select?Style.color.white:Style.color.black}}>天府新区</Text>
            </TouchableOpacity>
        )
    }
}
/*class Item extends Component{
    render(){
        return(
            <View style={{flexDirection:'row',flex:1,backgroundColor:'#d9d9d9',margin:5,paddingLeft:10,
                paddingRight:10,justifyContent:'center', alignItems:'center'}}>
                <View>
                    <Text style={{color:Style.color.black}}>天府新区</Text>
                </View>
            </View>
        )
    }
}*/
const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: Style.color.screen
    },
    listView: {
        height: Style.css.titleHeight, flexDirection: 'row', marginTop: 10,
    },
    titleView: {
        paddingLeft: 20,
        alignItems: 'center',
        flex: 1,
        height: Style.css.titleHeight,
        flexDirection: 'row',
        backgroundColor: Style.color.white,
        borderBottomWidth:2,
        borderColor:Style.color.gray,
        justifyContent: 'space-around',
    },
    listView:{height:40,width:'30%',margin:5,justifyContent:'center', alignItems:'center'},
    operateView:{height:100,flexDirection:'column',justifyContent:'center',alignItems:'center'},

})